<template>
  <div class="container-fluid text-center header">
      <div class="row align-items-center">
        <div class="col d-flex justify-content-start">
          <a href="/"><img src="../assets/logo.png" alt="Logo" class="headerlogo" /></a>
        </div>
        <div class="col d-flex justify-content-end">
          <button class="usercenterbtn" @click="goToUser">个人中心</button>
        </div>
      </div>
  </div>
  <div class="container-fluid page-content">
    <!-- 这里是padding-->
  </div>
</template>

<script setup>
// 跳转到个人中心
import router from "@/router/index.js";
import VueCookies from "vue-cookies";

const goToUser = () => {
  const userToken = VueCookies.get('userToken'); // 获取 userToken
  if (!userToken || userToken.trim() === '') {
    // 如果 cookie 为空，跳转到登录页面
    router.push(`/user/login`); // 路由跳转
  } else {
    // 如果不为空，可以跳转到个人中心主页
    router.push('/user/center');
  }
};
</script>

<style scoped>
  .header{
    position: fixed; /* 固定在顶部 */
    top: 0; /* 紧贴页面顶部 */
    left: 0; /* 从左侧开始 */
    width: 100%; /* 占据整个页面宽度 */
    background: white; /* 确保背景颜色 */
    z-index: 1000; /* 确保在其他元素之上 */
    margin-top: 0; /* 消除 margin */
    padding: 10px 13px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.04); /* 添加阴影 */
  }
  .headerlogo{
    width: 130px;
  }
  .usercenterbtn{
    border: 1px solid #666;
    border-radius: 5px;
    background-color: white;
    font-size: 16px;
    padding:0px 8px;
  }
  .page-content {
    padding-top: 50px; /* 确保内容部分不被遮挡 */
  }
</style>
